<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
    <title>胎压参考计算器</title>
    <link type="text/css" rel="stylesheet" href="./global.css">
</head>

<body>
    <form id="mForm" onsubmit="return onCalc()" onchange="onCalc()">
        <h1 style="text-align: center;">胎压参考计算器</h1>
        <table>
            <tr>
                <td class="title">骑手体重</td>
                <td class="cxt">
                    <input type="number" name="riderWeight" value=60 min="1" max="5000" step="0.01" />
                </td>
                <td class="weight unit">kg</td>
            </tr>
            <tr>
                <td class="title">自行车类型</td>
                <td class="cxt">
                    <select name="rideStyle" onchange="onRideStyleChange(this)">
                        <option value="RIDE_STYLE_ROAD">公路车（Road）</option>
                        <option value="RIDE_STYLE_GRAVEL">砾石车（Gravel）</option>
                        <option value="RIDE_STYLE_CROSS">公路越野车（Cyclocross）</option>
                        <option value="RIDE_STYLE_XCOUNTRY_MTB">XC山地车（MTB Cross Country）</option>
                        <option value="RIDE_STYLE_TRAIL_MTB">越野山地车（MTB Trail）</option>
                        <option value="RIDE_STYLE_DOWNHILL_MTB">速降山地车（MTB Downhill）</option>
                        <option value="RIDE_STYLE_ENDURO_MTB">耐力山地车（MTB Enduro）</option>
                        <option value="RIDE_STYLE_FAT">胖胎车（Fatbike）</option>
                        <option value="RIDE_STYLE_DIY">小轮车（测试）</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td class="title">车重</td>
                <td class="cxt">
                    <input type="number" name="bikeWeight" min="1" max="5000" step="0.01" />
                </td>
                <td class="weight unit">kg</td>
            </tr>
            <tr>
                <td class="title">轮圈直径</td>
                <td class="cxt">
                    <select name="wheelDiameter"></select>
                </td>
            </tr>
            <tr>
                <td class="title">内轮圈宽度</td>
                <td class="cxt">
                    <input type="number" name="innerRimWidth" min="1" />
                </td>
                <td class="unit">mm</td>
            </tr>
            <tr>
                <td class="title">轮圈类型</td>
                <td class="cxt">
                    <select name="rimType"></select>
                </td>
            </tr>
            <tr>
                <td></td>
                <td colspan="2">开口胎参考开口管胎</td>
            </tr>
            <tr>
                <td class="title">前轮胎宽</td>
                <td class="cxt">
                    <input name="frontTireWidth" type="range" min="1" max="100" step="1"
                        oninput="onFrontTireWidthChange(this)" />
                </td>
                <td class="unit" id="frontTireWidthVU" onclick="onFrontTireWidthVUClick()">28 mm</td>
            </tr>
            <tr>
                <td class="title">后轮胎宽</td>
                <td class="cxt">
                    <input name="rearTireWidth" type="range" min="1" max="100" step="1"
                        oninput="onRearTireWidthChange(this)" />
                </td>
                <td class="unit" id="rearTireWidthVU" onclick="onRearTireWidthVUClick()">28 mm</td>
            </tr>
            <tr>
                <td class="title">前轮外胎</td>
                <td class="cxt">
                    <select name="frontTireCasing"></select>
                </td>
            </tr>
            <tr>
                <td class="title">后轮外胎</td>
                <td class="cxt">
                    <select name="rearTireCasing"></select>
                </td>
            </tr>
            <tr>
                <td class="title">地面</td>
                <td class="cxt">
                    <select name="surface"></select>
                </td>
            </tr>
        </table>
        <table style="text-align: center;margin-top: 10px;">
            <tr>
                <td colspan="2" style="padding: 10px 0;">参考胎压</td>
            </tr>
            <tr>
                <td class="c_title w50">前轮</td>
                <td class="c_title w50">后轮</td>
            </tr>
            <tr>
                <td class="c_num w50" id="frontPsi">-- psi</td>
                <td class="c_num w50" id="rearPsi">-- psi</td>
            </tr>
            <tr>
                <td class="c_num2 w50" id="frontBar">-- bar</td>
                <td class="c_num2 w50" id="rearBar">-- bar</td>
            </tr>
        </table>
        <hr style="margin-top: 30px;">
        <div style="margin: 10px 0 20px 0;padding: 5px;">
            技术来源：<a href="https://axs.sram.com/guides/tire/pressure">SRAM TIRE PRESSURE GUIDE</a><br>
            轮圈尺寸参考：<a href="https://www.modernbike.com/iso-sizes-for-bicycle-tires-and-rims">modernbike</a>、<a
                href="https://cyclingvitality.com/bike-wheel-sizes-explained-a-guide-for-beginners/">cyclingvitality</a>
            <br><br>
            <a href="https://gitee.com/kukela/commuter-bike/blob/master/Doc/技巧.md">说明文档</a>、<a
                href="https://kukela.gitee.io/commuter-bike/">更多工具</a>
        </div>
    </form>
</body>

<script src="./utils.js"></script>
<script src="./global.js"></script>
<script src="./tirePressureGuide.js"></script>
<script>
    var frontTireWidthVU, rearTireWidthVU;

    window.onload = function () {
        if (!isES6()) return
        initView()
        onRideStyleChange()
        onCalc()
    }

    function initView() {
        frontTireWidthVU = document.getElementById("frontTireWidthVU")
        rearTireWidthVU = document.getElementById("rearTireWidthVU")
    }

    function onRideStyleChange(e) {
        let sO = null;
        try {
            sO = e.options[e.selectedIndex].value
        } catch (e) {
            sO = RIDE_STYLE_ROAD
            let el = getELWithName('rideStyle')
            el.value = sO
        }
        let wheelDiameterEl = getELWithName('wheelDiameter')
        let rimTypeEl = getELWithName('rimType')
        let frontTireCasingEl = getELWithName('frontTireCasing')
        let rearTireCasingEl = getELWithName('rearTireCasing')
        let surfaceEl = getELWithName('surface')

        let wdKList = []
        tireUnit = 0
        let rtList = [
            { v: RIM_TYPE_TUBELESS_STRAIGHT_SIDE, t: '无内胎直边（Hookless）' },
            { v: RIM_TYPE_TUBELESS_CROCHET, t: '无内胎钩边' },
            { v: RIM_TYPE_TUBULAR, t: '管胎' },
            { v: RIM_TYPE_TUBES, t: '开口管胎' }]
        let twMap = {}
        let tcList = [
            { v: TIRE_CASING_THIN, t: "薄" },
            { v: TIRE_CASING_STANDARD, t: "标准" },
            { v: TIRE_CASING_REINFORCED, t: "加强" },
            { v: TIRE_CASING_DOUBLE, t: "速降 / 双层" }]
        let sList = [{ v: SURFACE_DRY, t: "干" }, { v: SURFACE_SNOW, t: "雪" }, { v: SURFACE_WET, t: "湿" }]
        switch (sO) {
            case RIDE_STYLE_GRAVEL:
                wdKList = ['700c', '650b', '650c']
                twMap = { min: 18, max: 65, step: 1 }
                tcList.shift()
                sList.splice(1, 1)
                break
            case RIDE_STYLE_CROSS:
                wdKList = ['700c']
                twMap = { min: 18, max: 50, step: 1 }
                sList.splice(1, 1)
                break
            case RIDE_STYLE_XCOUNTRY_MTB:
                wdKList = ['29in', '27.5in', '26in']
                tireUnit = 1
                twMap = { min: 2, max: 3.8, step: 0.05 }
                tcList.shift()
                sList.splice(1, 1)
                break
            case RIDE_STYLE_TRAIL_MTB:
                wdKList = ['29in', '27.5in', '26in']
                tireUnit = 1
                twMap = { min: 2, max: 3.8, step: 0.05 }
                tcList.shift()
                sList.splice(1, 1)
                break
            case RIDE_STYLE_DOWNHILL_MTB:
                wdKList = ['29in', '27.5in', '26in']
                tireUnit = 1
                twMap = { min: 2, max: 3.8, step: 0.05 }
                tcList.shift()
                sList.splice(1, 1)
                break
            case RIDE_STYLE_ENDURO_MTB:
                wdKList = ['29in', '27.5in', '26in']
                tireUnit = 1
                twMap = { min: 2, max: 3.8, step: 0.05 }
                tcList.shift()
                sList.splice(1, 1)
                break
            case RIDE_STYLE_FAT:
                wdKList = ['27.5in', '26in']
                tireUnit = 1
                twMap = { min: 3.8, max: 5, step: 0.05 }
                tcList.shift()
                break
            case RIDE_STYLE_DIY:
                wdKList = ['24in', '22in', '20in', '18in', '16in', '14in', '12.5in']
                tireUnit = 1
                twMap = { min: 1, max: 3.8, step: 0.05 }
                sList.splice(1, 1)
                break
            case RIDE_STYLE_ROAD:
            default:
                wdKList = ['700c', '650b', '650c']
                twMap = { min: 18, max: 50, step: 1 }
                sList.splice(1, 1)
                break
        }
        let wdList = []
        wdKList.forEach(k => {
            wdList.push(wheelDiameterMap[k])
        });
        wheelDiameterEl.innerHTML = getOptionList(wdList)
        rimTypeEl.innerHTML = getOptionList(rtList)
        frontTireCasingEl.innerHTML = getOptionList(tcList)
        rearTireCasingEl.innerHTML = getOptionList(tcList)
        surfaceEl.innerHTML = getOptionList(sList)

        let dsvM = getDefaultSettingValues(sO)
        getELWithName('bikeWeight').value = dsvM.bikeWeight
        wheelDiameterEl.value = dsvM.wheelDiameter
        getELWithName('innerRimWidth').value = dsvM.innerRimWidth
        rimTypeEl.value = dsvM.rimType
        twMap.v = dsvM.frontTireWidth
        setRangeMap('frontTireWidth', twMap)
        twMap.v = dsvM.rearTireWidth
        setRangeMap('rearTireWidth', twMap)
        frontTireCasingEl.value = dsvM.frontTireCasing
        rearTireCasingEl.value = dsvM.rearTireCasing
        surfaceEl.value = dsvM.surface
    }

    function onFrontTireWidthChange(e) {
        frontTireWidthVU.innerHTML = e.value + " " + getTireUnitText()
    }

    function onFrontTireWidthVUClick() {
        const v = Number(prompt("前轮胎宽", getELWithName('frontTireWidth').value))
        setRangeValue('frontTireWidth', v)
    }

    function onRearTireWidthChange(e) {
        rearTireWidthVU.innerHTML = e.value + " " + getTireUnitText()
    }

    function onRearTireWidthVUClick() {
        const v = Number(prompt("后轮胎宽", getELWithName('rearTireWidth').value))
        setRangeValue('rearTireWidth', v)
    }

    function onCalc(e) {
        const formData = new FormData(document.getElementById("mForm"));
        let m = {};
        formData.forEach((value, key) => m[key] = value);
        m.riderWeight = Number(m.riderWeight)
        m.bikeWeight = Number(m.bikeWeight)
        m.wheelDiameter = Number(m.wheelDiameter)
        m.innerRimWidth = Number(m.innerRimWidth)
        m.frontTireWidth = Number(m.frontTireWidth);
        m.rearTireWidth = Number(m.rearTireWidth);
        if (tireUnit == 1) {
            m.frontTireWidth = convertInchesToMM(m.frontTireWidth)
            m.rearTireWidth = convertInchesToMM(m.rearTireWidth)
        }

        m.wheelPosition = 'WHEEL_FRONT';
        m.tireCasing = m.frontTireCasing;
        m.tireWidth = m.frontTireWidth;
        let frontC = calculateRecommendedPressure(m);
        console.log(m)

        m.wheelPosition = 'WHEEL_REAR';
        m.tireCasing = m.rearTireCasing;
        m.tireWidth = m.rearTireWidth;
        let rearC = calculateRecommendedPressure(m);

        let frontPsiEl = document.getElementById("frontPsi")
        let rearPsiEl = document.getElementById("rearPsi")
        let frontBarEl = document.getElementById("frontBar")
        let rearBarEl = document.getElementById("rearBar")

        frontPsiEl.innerHTML = recommendedPressure2Psi(frontC) + " psi"
        rearPsiEl.innerHTML = recommendedPressure2Psi(rearC) + " psi"
        frontBarEl.innerHTML = recommendedPressure2Bar(frontC) + " bar"
        rearBarEl.innerHTML = recommendedPressure2Bar(rearC) + " bar"

        return false
    }

    function recommendedPressure2Psi(v) {
        return Math.round(.0145038 * v * 10) / 10
    }

    function recommendedPressure2Bar(v) {
        return Math.round(.001 * v * 100) / 100
    }
</script>
<script src="./baidu_tongji.js"></script>

</html>